<template>
  <view class="preview-image-wrapper">
    <uni-nav-bar :border="false" @click-left="naviBack" :status-bar="true" @click-right="choose" :fixed="true" :shadow="false" color="#fff" background-color="#000000" left-icon="back"  right-icon="more" title="个人头像"></uni-nav-bar>
    <image class="preview-image" mode="aspectFill" :src="userData.avatarUrl"></image>
  </view>
</template>

<script>
    import {uniNavBar,uniIcon} from '@dcloudio/uni-ui';
    import {mapState, mapGetters, mapMutations, mapActions} from 'vuex';
    import mixins from '@/mixins/index';
    import application from '@/settings/Application'
    let {domain} = application;
    export default {
        name: "previewAvatar",
        data(){
            return {
                token:''
            }
        },
        mixins:[mixins],
        components:{uniNavBar,uniIcon},
        computed:{
          ...mapState({
            model:state=>state.settings.systemInfo.model,
            }),
          isIphoneX(){
            return this.model.toLowerCase()=='iPhoneX'.toLowerCase();
          }
        },
        methods:{
          ...mapMutations({
            updateAvatar:'user/updateAvatar',
          }),
          naviBack(){
            if(this.isIphoneX){
                plus.navigator.setFullscreen(false)
                setTimeout(function(){
                  uni.navigateBack();
                },50)
            }else{
              uni.navigateBack();
            }
            
          },
          choose(){
              var that = this;
              uni.chooseImage({
                                success: (chooseImageRes) => {
                                const tempFilePaths = chooseImageRes.tempFilePaths;
                                    that.uploadFile(tempFilePaths[0]);
                                }
                            });
              // uni.showActionSheet({
              //     itemList: ['拍照', '从手机相册选择'],
              //     success: function (res) {
              //         if(res.tapIndex==0){
              //           // #ifdef APP-PLUS
              //           var cmr = plus.camera.getCamera();
              //           var res = cmr.supportedImageResolutions[0];
              //           var fmt = cmr.supportedImageFormats[0];
              //           console.log("Resolution: "+res+", Format: "+fmt);
              //           cmr.captureImage( function( path ){
              //               console.log( "Capture image success: " + path );  
              //               that.uploadFile(path);
              //             },
              //             function( error ) {
              //               console.log( "Capture image failed: " + error.message );
              //               uni.showToast({
              //                   title: '拍照失败',
              //                   icon:'none',
              //                   duration: 2000
              //               });
              //             },
              //             {resolution:res,format:fmt}
              //           );
              //           // #endif
              //           return;
              //         }
              //         if(res.tapIndex==1){
              //               uni.chooseImage({
              //                   success: (chooseImageRes) => {
              //                   const tempFilePaths = chooseImageRes.tempFilePaths;
              //                       that.uploadFile(tempFilePaths[0]);
              //                   }
              //               });
              //           return;
              //         }
              //     },
              //     fail: function (res) {
              //         console.log(res.errMsg);
              //     }
              // });
          },
          uploadFile(tempFilePath){
                  const that = this;
                        uni.showLoading({
                            title: '图片上传中'
                        });
                          uni.uploadFile({
                              url:`${domain}/api/user/updateAvatar`, //仅为示例，非真实的接口地址
                              filePath: tempFilePath,
                              header:{
                                'X-Access-Token':this.token
                              },
                              name: 'file',
                              success: ({data}) => {
                                  uni.hideLoading();
                                  data = JSON.parse(data)
                                  if(data.success){
                                      // 更新头像地址
                                      that.updateAvatar({avatarUrl:data.result})
                                  }
                              }
                          });
          }
        },
        onReady(){
          const tokenInfo = uni.getStorageSync('tokenInfo');
          const {token,timestamp} = tokenInfo
          this.token = token
          // #ifdef APP-PLUS
          if(this.isIphoneX){
            plus.navigator.setFullscreen(true)
          }
          // #endif
        },
        onUnload(){
          uni.hideLoading();
          // #ifdef APP-PLUS
          if(this.isIphoneX&&plus.navigator.isFullscreen()){
            plus.navigator.setFullscreen(false)
          }
           // #endif
        },
       
        //点击导航栏 buttons 时触发
        onNavigationBarButtonTap(e) {
          
        },
        onLoad(query){
        }
    }
</script>

<style scoped>
  .preview-image-wrapper {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
  }
  .preview-image {
    position: absolute;
    /* left: 50%; */
    top: 20%;
    bottom: 20%;
    /* -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%); */
    max-height: 100%;
    min-height: 40%;
    height: 60%;
    width: 100%;
  }
</style>